import { getActionSheetList } from '@/servers/api/base';
import { Cascader } from 'antd';
import { useEffect, useState } from 'react';
interface Option {
    id?: string | number | null;
    text: React.ReactNode;
    children?: Option[];
    isLeaf?: boolean;
}

const FormCascader: React.FC<IBuildForm.Params> = (props) => {
    const { item } = props;
    const [options, setoptions] = useState([]);
    function getList() {
        getActionSheetList({
            type: (item.value as IBuildForm.IItemvalue).type,
            pid: (item.value as IBuildForm.IItemvalue).pid,
        }).then((res) => {
            if (item.child) {
                setoptions(
                    res.data.map((item: IBuildForm.Item) => {
                        return {
                            ...item,
                            isLeaf: false,
                        };
                    }),
                );
            } else {
                setoptions(res.data);
            }
        });
    }
    const loadData = async (selectedOptions: Option[]) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        // load options lazily
        const child = await getActionSheetList({
            type: (item.value as IBuildForm.IItemvalue).type,
            pid: targetOption.id as number,
        });
        targetOption.children = child.data;
        setoptions([...options]);
    };
    useEffect(() => {
        getList();
    }, []);
    return (
        <Cascader
            // {...props}
            onChange={props.onChange}
            options={options}
            placeholder={props.placeholder}
            loadData={loadData}
            fieldNames={{
                label: 'text',
                value: 'id',
            }}
        />
    );
};
export default FormCascader;
